<template>
<div id="app">
  <div>
      <div class="top">
          <van-search v-model="value" background="#5FCBBB" placeholder="请输入搜索关键词" />
      </div>
      <div class="bottom">
          <van-collapse v-model="activeNames" accordion>
              <div v-for="(item,index) in nameList" :key="index" @click="open(item)">
                  <van-collapse-item :name="index" :title="item.typeName">
                    <ul>
                      <li v-for="items in list" :key="items.id" @click="gobuy(items.id,item.id)">
                        {{ items.serviceName }}
                      </li>
                    </ul>
                  </van-collapse-item>
              </div>
          </van-collapse>
      </div>
  </div>
      
</div>
  
</template>

<script>
import { mapState, mapActions } from "vuex";
import axios from "../../request";
export default {
  data() {
    return {
      value: "",
      activeNames: "1",
      list: [],
    };
  },
  computed: {
    ...mapState("homes", ["nameList"]),
  },
  created(){
    this.init()
  },
  methods: {
    ...mapActions("homes", ["init"]),
    open(item) {
      // console.log(item);
      axios
        .get("/api/sys/myService", { params: { id: item.id } })
        .then((data) => {
          // console.log(data)
          this.list = data.data.data;

          
        });
    },
    gobuy(id,ids){
        if(ids == 6){
             this.$router.push("/recharge/"+id)   
        }else{
        this.$router.push({path:"/itme/homemaintain/" ,
            query:{
                id,
                fatherid:ids
            }})
        }
        
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  height: 0.6rem;
  line-height: 0.6rem;
  background: linear-gradient(#5fcbbb, #fff);
}
ul {
  display: flex;
  flex-wrap: wrap;
  background: #f4f4f4;
  box-sizing: border-box;
  li {
    width: 0.7rem;
    text-align: center;
    height: 0.26rem;
    line-height: 0.26rem;
    background: #ffffff;
    border-radius: 0.14rem;
    margin-left: 0.12rem;
    margin-top: 0.06rem;
    margin-bottom: 0.06rem;
    font-size: 0.12rem;
    color: #333;
  }
}
</style>
